<template>
  <div class="lsc-info">
    <mt-header title="个人信息"></mt-header>
    <div class="my_header_v4_wrap">
      <div class="my_header_v4">
        <div class="my_header_v4_main" id="myHeader">
          <div class="my_header_v4_avatar">
              <div class="my_header_v4_avatar_img">
                <img :src="info.head" />
              </div>
          </div>
          <div class="my_header_v4_msg">
            <div class="my_header_v4_name">
              <span class="my_header_v4_name_text" data-tag="editNameSpan">{{ info.name }}</span>
              <i class="my_header_v4_name_edit" data-tag="editNamei"></i>
            </div>
            <div class="my_header_v4_pin" >{{ info.mobileno }}</div>
            <div class="my_header_v4_pin" style="color:#f42020">会员编码：{{ info.refereeno }}</div>

          </div>
          <div class="my_header_v4_settings" @click="photoAdd">更换头像</div>
        </div>
      </div>
    </div>

    <div class="lsc-info-server">
      <label>服务信息</label>
      <mt-cell title="服务内容"></mt-cell>
      <div class="lsc-info-popupshow">
        <mt-cell v-for="(item,index) in info.service_contents" :key="index" icon="field-success" :title="item"></mt-cell>
      </div>
      <mt-cell 
        title="服务区域" 
        :value="info.province + ' ' + info.city + ' ' + info.area">
      </mt-cell>
      <mt-cell title="工作年限" :value="info.working_life"></mt-cell>
      <mt-cell title="持有执照" :value="info.license"></mt-cell>
    </div>
    <div class="lsc-info-identity">
      <label>身份信息</label>
      <mt-cell title="身份认证">
        <span style="color: #26a2ff">
          {{ 
            info.checkstatus==0 ? '待审核' : (info.checkstatus==1 ? '已认证' : '认证不通过')
          }}
        </span>
      </mt-cell>
    </div>
    
  </div>
</template>

<script>
import wx from "wx";
import api from '../api';

export default {
  name: 'info',
  data () {
    return {
      info: {}
    }
  },
  created() {
    // 获取个人信息
    this.getMyInfo()
    // 微信签名
    this.getWxConfig()
  },
  deactivated() {
  },
  methods: {
    getMyInfo() {
      this.axios.get(api.housekeeper.MyInfo)
        .then(res=>{
          this.info = res.data.data
        })
    },
    photoAdd() {
      let _this = this;
      wx.chooseImage({
        count: 1, // 默认9
        sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
        success: function(res) {
          let localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
          _this.photoUpload(localIds)
        },
        fail: function(err) {
          _this.$toast('PICTURE ADD ERROR')
        }
      });
    },
    photoUpload(localIds) {
      let _this = this
      wx.uploadImage({
        localId: localIds.toString(),
        isShowProgressTips: 1,
        success: function (res) {
          
          _this.axios({
            method: "post",
            url: `${api.housekeeper.UploadHead}?serverId=${res.serverId}`,
            data: {},
            responseType: "json"
          })
            .then(res=> {
              _this.info.head = res.data.data
            })
        },
        fail: function (res) {
          _this.$toast('PICTURE UPLOAD ERROR')
        }
      });
    },
    getWxConfig() {
      let signLink =  location.href.split('#')[0] ///(Android)/i.test(navigator.userAgent) ? location.href.split('#')[0] : localStorage.entryUrl;
      
      const getWxValid = () => {
        this.axios({
          method: "get",
          url: api.valid.WxConfig,
          params: {
            pageurl: signLink
          }
        }).then(function(rsp) {
            wxconfig(rsp.data);
          }).catch(err=>{
              alert(JSON.stringify(err))
            })
      };
      const wxconfig = datas => {
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: datas.appId, // 必填，公众号的唯一标识
          nonceStr: datas.nonceStr, // 必填，生成签名的随机串
          timestamp: datas.timestamp, // 必填，生成签名的时间戳
          signature: datas.signature, // 必填，签名，见附录1
          jsApiList: [
            "checkJsApi",
            "chooseImage",
            "previewImage",
            "uploadImage",
            "downloadImage",
            "translateVoice"
          ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
      };
      wx.hideMenuItems({
        menuList: [
          "menuItem:share:appMessage",
          "menuItem:share:timeline",
          "menuItem:share:qq",
          "menuItem:share:weiboApp",
          "menuItem:share:facebook",
          "menuItem:share:QZone",
          "menuItem:copyUrl",
          "menuItem:originPage",
          "menuItem:openWithQQBrowser",
          "menuItem:openWithSafari"
        ] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
      });

      getWxValid()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.lsc-info-server>label,
.lsc-info-identity>label {
  padding: 10px;
  display: block;
}
.mint-popup-3 {
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.lsc-info-popupshow {
  background: #fff;
  padding: 0 10px;
}

.my_header_v4_wrap {
    /* margin-bottom: 15px;
    padding: 10px;
    background-color: #fff */
}
.my_header_v4_settings {
  color: #fff;
  text-decoration: none;
}
.my_header_v4_wrap .my_header_v4 {
    overflow: hidden;
    position: relative;
    /* border-radius: 6px; */
    color: #fff;
    background: -webkit-linear-gradient(left,#68323f,#e8acba);
    /* background: linear-gradient(90deg,#eb3c3c,#ff7459); */
    -webkit-box-shadow: 0 2px 5px rgba(39, 31, 31, 0.4);
    box-shadow: 0 2px 5px rgba(39, 31, 31, 0.4);
}

.my_header_v4_wrap .my_header_v4.bg_gold {
    background: -webkit-linear-gradient(left,#dd9b4c,#ffd787);
    background: linear-gradient(90deg,#dd9b4c,#ffd787);
    box-shadow: 0 2px 5px #f8e3c6
}

.my_header_v4_wrap .my_header_v4.bg_gold .my_header_v4_link,.my_header_v4_wrap .my_header_v4.bg_gold .my_header_v4_vip {
    background-color: rgba(180,116,15,.3)
}

.my_header_v4_wrap .my_header_v4_main {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 25px 15px
}

.my_header_v4_wrap .my_header_v4_avatar {
    position: relative;
    margin-right: 10px;
    width: 60px;
    height: 60px;
    border: 1px solid hsla(0,0%,100%,.4);
    border-radius: 60px;
    box-shadow: 0 2px 10px rgba(0,0,0,.15)
}

.my_header_v4_wrap .my_header_v4_avatar img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 60px
}

.my_header_v4_wrap .my_header_v4_avatar_img {
    overflow: hidden;
    border-radius: 60px;
    padding-top: 100%
}

.my_header_v4_wrap .my_header_v4_avatar_tag {
    position: absolute;
    left: 50%;
    bottom: -3px;
    z-index: 1;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    padding: 0 14px 0 6px;
    height: 15px;
    line-height: 15px;
    border-radius: 15px;
    font-size: 10px;
    white-space: nowrap;
    color: hsla(0,0%,100%,.7);
    background-color: rgba(0,0,0,.5)
}

.my_header_v4_wrap .my_header_v4_avatar_tag::after {
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    border-top: 1px solid hsla(0,0%,100%,.7);
    border-left: 1px solid hsla(0,0%,100%,.7);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    position: absolute;
    right: 6px;
    top: 5px
}

.my_header_v4_wrap .my_header_v4_avatar .my_header_v4_vip {
    white-space: nowrap;
    margin: 0;
    position: absolute;
    bottom: -3px;
    left: 5px
}

.my_header_v4_wrap .my_header_v4_msg {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0
}

.my_header_v4_wrap .my_header_v4_plus {
    position: absolute;
    right: -2px;
    bottom: -8px;
    -webkit-transform: rotate(11deg);
    transform: rotate(11deg);
    padding: 18px 15px 15px 8px;
    border-top-left-radius: 4px;
    box-shadow: -1px -1px 6px #c6934d;
    background-size: 50px
}

.my_header_v4_wrap .my_header_v4_plus_btn {
    position: relative;
    padding: 0 8px 0 5px;
    height: 12px;
    line-height: 12px;
    border-radius: 12px;
    font-size: 7px;
    color: #cead68;
    background-color: hsla(0,0%,85%,.1)
}

.my_header_v4_wrap .my_header_v4_plus_btn::before {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
    background-color: #535353;
    border: 1px solid #ddd;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: none;
    border-color: #535353;
    border-radius: 12px
}
</style>
<style>

.lsc-info .mintui-field-success:before {
  color: #26a2ff
}
</style>

